<template>
  <div ref="dom" class="charts chart-bar" style="background-color: #f6f7fb"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBarstack12',
  props: {
    value: Array,
    // value: Object,
    text: String,
    barWidth: String,
    rotate: String,
    subtext: String,
    series: Array,
    clickTag: String,
    seriesData: Array,
    grid: Object,
    xData: Array,
    legend: Object,
    legendList: Array,
    tooltip: Object,
    legendData: Array,
    seriesName: String,
    color: {
      type: Array,
      default: () => {
        return ['#2f83e4']
      }
    },
  },
  data () {
    return {
      dom: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    text: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    xData: {
      deep: true,
      handler (val) {
        // console.log(val)
        this.intChart()
      }
    },
    series: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    barWidth: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    rotate: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    titleData (orgs) {
      var titleList = [
        {
          text: this.text,
          left: 'center',
          top: '5%',
          textStyle: {
            color: '#333',
            fontSize: 24
          }
        }
      ]
      let len = orgs.length
      if (len == 1) {
        let org = orgs[0]
        let l = org.length
        let x = 50 - l * 0.75 + '%'
        // console.log(x)
        titleList.push({
          left: x,
          text: org,
          bottom: '7%'
        })
      } else if (len == 2) {
        let len1 = orgs[0].length
        let len2 = orgs[1].length
        let x1 = 26 - len1 / 2 + '%'
        let x2 = 26 - len2 / 2 + '%'
        titleList.push({
          left: x1,
          text: orgs[0],
          bottom: '7%'
        })
        titleList.push({
          right: x2,
          text: orgs[1],
          bottom: '7%'
        })
      } else if (len == 3) {
        let len1 = orgs[0].length
        let len2 = orgs[1].length
        let len3 = orgs[2].length
        let x1 = 19 - len1 * 0.75 + '%'
        let x2 = 49 - len2 * 0.75 + '%'
        let x3 = 79 - len3 * 0.75 + '%'
        titleList.push({
          left: x1,
          text: orgs[0],
          bottom: '7%'
        })
        titleList.push({
          left: x2,
          text: orgs[1],
          bottom: '7%'
        })
        titleList.push({
          left: x3,
          text: orgs[2],
          bottom: '7%'
        })
      } else if (len == 4) {
        let len1 = orgs[0].length
        let len2 = orgs[1].length
        let len3 = orgs[2].length
        let len4 = orgs[3].length
        let x1 = 12 - len1 * 0.75 + '%'
        let x2 = 36 - len2 * 0.75 + '%'
        let x3 = 60 - len3 * 0.75 + '%'
        let x4 = 84 - len4 * 0.75 + '%'
        titleList.push({
          left: x1,
          text: orgs[0],
          bottom: '7%',
          textStyle: {
            fontSize: 14
          }
        })
        titleList.push({
          left: x2,
          text: orgs[1],
          bottom: '7%',
          textStyle: {
            fontSize: 14
          }
        })
        titleList.push({
          left: x3,
          text: orgs[2],
          bottom: '7%',
          textStyle: {
            fontSize: 14
          }
        })
        titleList.push({
          left: x4,
          text: orgs[3],
          bottom: '7%',
          textStyle: {
            fontSize: 14
          }
        })
      }
      return titleList
    },
    xAxisData (orgs, xData) {
      var xDatas = []
      let len = orgs.length
      for (let i = 0; i < len; i++) {
        let xtype = {
          type: 'category',
          axisLabel: { rotate: this.rotate,show:true,interval:0 },
          // axisLabel: { rotate: '90' },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          data: xData,
          gridIndex: i
        }
        xDatas.push(xtype)
      }
      return xDatas
    },
    yAxisData (orgs) {
      var yData = []
      for (var j = 0; j < orgs.length; j++) {
        var yAxis = {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: { show: false }
        }
        yAxis['gridIndex'] = j
        yData.push(yAxis)
      }
      return yData
    },
    gridData (len) {
      var grid = []
      if (len == 1) {
        grid = [
          {
            top: '25%',
            bottom: '20%',
            left: '10%',
            right: '10%'
          }
        ]
      } else if (len == 2) {
        grid = [
          {
            top: '25%',
            bottom: '20%',
            left: '10%',
            right: '55%'
          },
          {
            top: '25%',
            bottom: '20%',
            left: '55%',
            right: '10%'
          }
        ]
      } else if (len == 3) {
        grid = [
          {
            top: '25%',
            bottom: '20%',
            x: '7.5%',
            width: '25%'
          },
          {
            top: '25%',
            bottom: '20%',
            x: '37.5%',
            width: '25%'
          },
          {
            top: '25%',
            bottom: '20%',
            x: '67.5%',
            width: '25%'
          }
        ]
      } else if (len == 4) {
        grid = [
          {
            //   left: '10%',
            //   right: "10%",
            // y: '2%',
            top: '25%',
            bottom: '20%',
            x: '1%',
            width: '23%'
          },
          {
            //   left: "55%",
            //   right: '10%',
            // y: '2%',
            top: '25%',
            bottom: '20%',
            x: '25%',
            width: '23%'
          },
          {
            top: '25%',
            bottom: '20%',
            x: '49%',
            width: '23%'
            //   left: "55%",
            //   right: '10%',
            // y: '2%',
          },
          {
            top: '25%',
            bottom: '20%',
            x: '73%',
            width: '23%'
            //   left: "55%",
            //   right: '10%',
            // y: '2%',
          }
        ]
        // let g = {top: "25%",bottom: "20%"}
        // let x = '1%'
        // let width = '23%'
      }
      return grid
    },
    formatData (titleList,schoolObj) {
      var series = []
      var pos
      console.log(schoolObj)
      if (JSON.stringify(schoolObj) == '{}'){
        return
      }
      console.log(Object.keys(schoolObj[0]), 'schoolObj')
      if (Object.keys(schoolObj[0]).length==1) {
        pos = '20%'
      } else {
        pos = '5%'
      }
      for (var items in schoolObj) {
        var num = 0
        for (var i in schoolObj[items]) {
          var stype = {
            type: 'bar',
            showSymbol: false,
            barWidth: this.barWidth + '%',
            label: {
              normal: {
                position: [pos,'50%'],
                color: '#17233d',
                show: true,
                formatter: function (params) {
                  // console.log(params)
                  if (params.value > 0) {
                    var str = Number(params.value * 100).toFixed(2)
                    str += '%'
                    return str
                  } else {
                    return ''
                  }
                }
              }
            },
            stack: i,
            yAxisIndex: num,
            xAxisIndex: num
          }
          stype['name'] = this.legendList[items]
          stype['data'] = schoolObj[items][i]
          series.push(stype)
          num++
        }
      }
      return series
    },
    intChart () {
      if (!this.value) {
        return false
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.showLoading({
        text: 'loading',
        color: '#2D8CF0',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      })
      let datas = this.value
      console.log(this.value)
      let titleList = []
      let vals = {}
      let val0={}
      let val1={}
      let val2={}
      for (let i in datas) {
        let org = datas[i].name
        titleList.push(org)
        val0[org] = datas[i]['value'][0]
        val1[org] = datas[i]['value'][1]
        val2[org] = datas[i]['value'][2]
        vals[0] = val0
        vals[1] = val1
        vals[2] = val2
      }

      let xData = this.xData
      var titles = this.titleData(titleList)
      var xAxis = this.xAxisData(titleList, xData)
      var yAxis = this.yAxisData(titleList)
      var grid = this.gridData(titleList.length)
      var series = this.formatData(titleList,vals)
      this.$nextTick(() => {
        var option = {
          title: titles,
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              var str = params[0].name
              for (var i in params) {
                if (Number(params[i].value * 100).toFixed(2) == 0) {
                  str += '<br>' + params[i].marker + params[i].seriesName + '：' + Number(params[i].value * 100)
                } else {
                  str += '<br>' + params[i].marker + params[i].seriesName + '：' + Number(params[i].value * 100).toFixed(2) + '%'
                }
              }
              // console.log(str)
              return str
            }
          },
          legend: {
            data: this.legendList,
            x: 'center',
            top: '15%'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            y: 'center',
            right: '10px',
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          color: [
            '#5383FF',
            '#FFC75C',
            '#74D8c9'
          ],
          xAxis: xAxis,
          yAxis: yAxis,
          grid: grid,
          series: series
        }
        // console.log(option)
        setTimeout(() => {
          // setOption前隐藏loading事件
          this.dom.hideLoading();
          this.dom.setOption(option, true)
        }, 1000);

        on(window, 'resize', this.resize)
      })
    }
  },
  mounted () {
    this.intChart()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
